<template>
    <view class="page">
        <view
            :class="item.id == checkIndex || item.id == 999 ? 'inTitle' : 'title'"
            v-for="(item, index) in titleList"
            :key="index"
            @click.stop="checkChange(item)"
        >
            {{ item.title }}
            <view class="unread" v-if="unread.indexOf(item.id) >= 0"></view>
        </view>
    </view>
</template>
<script>
import Header from "@/components/Header.vue";
var app = getApp()
export default ({
    name: "resetPassword",
    props: {
        checkIndex: {
            type: Number,
            default: 1
        },
        titleList: {
            type: Array,
            default: []
        },
        unread: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
        }
    },
    components: {
        Header
    },
    methods: {
        checkChange(item) {
            if (this.checkIndex != item.id) {
                this.$emit('checkChange', item.id)
            }
        }
    }
})
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #FFFFFF;
    border-bottom: 1rpx solid #e2e2e2;
    position: relative;
    z-index: 5;
    .unread {
        width: 14rpx;
        height: 14rpx;
        border-radius: 50%;
        background: red;
        position: relative;
        right: -8rpx;
        top: -10rpx;
    }
    view {
        height: 100%;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .inTitle {
        color: #5162FD;
        border-bottom: 2rpx solid #5162FD;
    }
    /*.inTitle::before {
        content: '';
        width: 50rpx;
        height: 2rpx;
        background: #5162FD;
        position: relative;
        bottom: -50%;
        left: 50%;

    }*/
    .title {
        color: #656667;
    }
}
</style>
